<template>
    <div class="pdf">
        <j-modal
            class="pdfBox"
            title="pdf预览"
            :visible="visible"
            :width="700"
            :maskClosable="false"
            :switchFullscreen="switchFullscreen"
            @cancel="handleCancel"
            :footer="null">
            <iframe
                :src="`/web/viewer.html?file=${encodeURIComponent(`${pdfUrl}`)}`"
                frameborder="0"
                class="pdf-window"
            >
            </iframe>
        </j-modal>
    </div>
</template>

<script>
import {
    cxjTjbDownload
} from "@/api/manage"
export default {
    data(){
        return {
            path: '',
            pdfUrl: "",
            visible: false,
            switchFullscreen: true,
        }
    },
    props: ['sys_cxj_jttjdw_id','sbnd', "showPdf"],
    watch: {
        showPdf(next, prev) {
            if (next != prev) {
                var self = this;
                self.visible = !self.visible;
                cxjTjbDownload({
                    sys_cxj_jttjdw_id: self.sys_cxj_jttjdw_id,
                    sbnd: self.sbnd
                }).then(res=>{
                    let blob = new Blob([res])
                    self.pdfUrl = self.getObjectURL(blob);
                })
            }
        }
    },
    methods: {
        handleCancel(){
            this.visible = false;
        },
        getObjectURL(file) {
            let url = null
            if (window.createObjectURL !== undefined) { // basic
                url = window.createObjectURL(file)
            } else if (window.webkitURL !== undefined) { // webkit or chrome
                try {
                    url = window.webkitURL.createObjectURL(file)
                } catch (error) {
                    // console.log(error)
                }
            } else if (window.URL !== undefined) { // mozilla(firefox)
                try {
                    url = window.URL.createObjectURL(file)
                } catch (error) {
                    // console.log(error)
                }
            }
            return url;
        }
    }
}
</script>
<style lang='less'>
    .pdfBox {
        &.fullscreen  {
            .ant-modal {
                width: 100%!important;
                top: 0!important;
                height: 100%!important;
                .ant-modal-content {
                    max-height: 100%!important;
                    height: 100%!important;
                    .ant-modal-body {
                        margin-top: 0;
                    }
                }
            }
        }
        .ant-modal {
            width: 1200px!important;
            top: 30px!important;
            height: 700px!important;
            .ant-modal-content {
                max-height: 700px!important;
                height: 700px!important;
                .ant-modal-body {
                    margin-top: 30px;
                }
            }
        }
    }
</style>
<style scoped>
    .pdf {
        width: 90%;
        height: 90%;
    }
    iframe {
        width: 100%;
        height: 100%;
    }
</style>